<!--
 * @Author: RAY_HUI 1541917867@qq.com
 * @Date: 2025-07-07 10:23:46
 * @LastEditors: RAY_HUI 1541917867@qq.com
 * @LastEditTime: 2025-07-25 15:59:09
 * @FilePath: \website-reconstruction---vue\src\components\sections\home\AgentSlider.vue
 * @Description: 
 * 
 * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved. 
-->
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { nextTick } from 'vue'

onMounted(async () => {
  await nextTick() // 等待DOM更新完成
  if (window.jQuery && window.$('.car-slider').length) {
    window.$('.car-slider').slick({
      slidesToShow: 4,
      slidesToScroll: 1,
      autoplay: true,
      arrows: true,
      dots: true,
    })
  }
})
// 假设你需要点击后跳转到对应的服务详情页
const router = useRouter()
import { defineProps } from 'vue'
import { DataProp } from '@/types/selfdefine/Layout'

const props = defineProps<{
  data: DataProp | undefined
}>()

const goToAgentDetail = (agentName: string) => {
  // 这里可以根据实际需要进行路由跳转或执行其他操作
  // console.log(`Navigating to detail page for ${agentName}`)
}
</script>

<template>
  <section
    class="section-padding car-booking bg-light-white wow fadeInLeft"
    data-wow-delay="0.2s"
  >
    <div class="container" v-if="data">
      <div class="section-header text-center">
        <div class="section-heading">
          <h3 class="text-custom-black">
            {{ data.partTitle.slice(0, -2) }}
            <span class="text-custom-blue">{{ data.partTitle.slice(-2) }}</span>
          </h3>
          <div class="section-description">
            <p class="text-light-dark">
              {{ data.content }}
            </p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <div class="car-slider arrow-layout-2 row">
            <div
              v-for="agent in data.partContentVoList"
              :key="agent.partId"
              class="slide-item col-12"
            >
              <div class="Product-grid">
                <div class="Product-grid-wrapper Product-grid bx-wrapper">
                  <div class="image-sec" v-if="agent.imageUrl">
                    <a href="#" @click.prevent="goToAgentDetail(agent.content)">
                      <img
                        :src="agent.imageUrl"
                        class="full-width full-height object-fit-fill"
                        alt="img"
                        style="object-fit: fill"
                      />
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
